<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
 <script src="../../layui/layui.js"></script>
 <title>CSS3动画类</title>
 <style>
  .layui-anim {
   background: #009688;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   color: #008cff;
  }

  /* 这段样式只是用于演示 */
  #component-anim .layui-card-body {
   padding: 15px;
  }

  #component-anim .component-anim-demo {
   margin-bottom: 50px;
   font-size: 0;
  }

  #component-anim .component-anim-demo li {
   display: inline-block;
   vertical-align: middle;
   width: 127px;
   line-height: 25px;
   padding: 20px 0;
   margin-right: -1px;
   margin-bottom: -1px;
   border: 1px solid #e2e2e2;
   font-size: 14px;
   text-align: center;
   color: #666;
   transition: all .3s;
   -webkit-transition: all .3s;
  }

  #component-anim .component-anim-demo li .layui-icon {
   display: inline-block;
   font-size: 36px;
  }

  #component-anim .component-anim-demo li .fontclass {
   display: none;
  }

  #component-anim .component-anim-demo li .name {
   color: #c2c2c2;
  }

  #component-anim .component-anim-demo li:hover {
   background-color: #f2f2f2;
   color: #000;
  }

  #component-anim .component-anim-demo li {
   width: 222px;
  }

  #component-anim .component-anim-demo .layui-anim {
   width: 150px;
   height: 150px;
   line-height: 150px;
   margin: 0 auto 10px;
   text-align: center;
   background-color: #009688;
   cursor: pointer;
   color: #fff;
   border-radius: 50%;
  }
 </style>
</head>

<body>
 <div class="layui-container">
  <h3>使用方式</h3>
  <p>动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可</p>
  其中 layui-anim 是必须的，后面跟着的即是不同的动画类
  <div class="layui-anim layui-anim-up"></div>
  循环动画，追加：layui-anim-loop
  <div class="layui-anim layui-anim-rotate layui-anim-loop">360</div>

  <h3>代码高亮文档</h3>
  <pre class="layui-code">
   //代码区域
   var a = 'hello layui';
   for(let i=0;i<10;i++){
    console.log(i);
   }
  </pre>

  <pre id="name">
   var name='buag';
   <h3>sdad </h3>
  </pre>
  <pre id="data" lay-skin="notepad">
   var a = 'hello layui';
  </pre>
  <img src="../../img/25.png" alt="">
  <pre class="lay-code" id="as" lay-title="12" lay-height="150px" lay-skin="" lay-encode="true">
   var as = 'hello layui;'
  </pre>
 </div>

 <script>
  ; !function () {
   var $ = layui.$
    , admin = layui.admin
    , element = layui.element
    , router = layui.router();

   layui.code();

   layui.code({
    elem: "#name",
    title: '代码',
    height: '100px',
    encode: true,
    about: false,
    skin: 'notepad',
   });
   layui.code({
    elem: '#data',
   });
   layui.code({
    elem: '#as',
   });

   /* 演示动画 */
   $('#component-anim .component-anim-demo .layui-anim').on('click', function () {
    var othis = $(this), anim = othis.data('anim');

    /* 停止循环 */
    if (othis.hasClass('layui-anim-loop')) {
     return othis.removeClass(anim);
    }

    othis.removeClass(anim);

    setTimeout(function () {
     othis.addClass(anim);
    });

    /* 恢复渐隐 */
    if (anim === 'layui-anim-fadeout') {
     setTimeout(function () {
      othis.removeClass(anim);
     }, 1300);
    }
   });
  }();
 </script>
</body>

</html>